﻿<template>
  <div class="slider rotate">
    <div class="content" @click="clickWord">
      <div class="bg-img-div">
        <img :src="captcha.backgroundImage" id="imgId" ref="bgImg" alt v-show="false"/>
        <canvas id="canvasId" ref="bgImg"></canvas>
      </div>
      <div class="bg-click-div">
        <span class="click-span" v-for="(item) in clickCount.num"
          :style="`left:${clickCount.left[item - 1]}px; top:${clickCount.top[item - 1]}px;background-color:${clickCount.color}`">
          {{item}}
        </span>
      </div>
    </div>
    <div class="bottom">
      <div class="close-btn" @click="close()"></div>
      <div class="refresh-btn" @click="refreshCaptcha"></div>
      <div class="tip-text">请按照语序点击图片中的文字</div>
    </div>
  </div>
</template>

<script>
import { reqCheck } from '@/api/login'
export default {
  name:"Captcha",
  props:{
    captcha:{
      type:Object
    },
  },
  data() {
    return {
      currentCaptchaConfig:{
        trackList:[]
      },
      clickCount:{
        num:0,
        left: [],
        top: [],
        color:""
      }
    }
  },
  mounted() {
    this.initCaptcha();
  },
  methods:{
    clickWord(event){
      let num = 4; //点选几个字
      if(this.clickCount.num < num){
        this.clickCount.num++;
      }
      if (this.clickCount.num === 1) {
        this.currentCaptchaConfig.startSlidingTime = new Date();
        // move 轨迹
        window.addEventListener("mousemove", this.move);
      }
      this.currentCaptchaConfig.trackList.push({
        x: event.offsetX,
        y: event.offsetY,
        t: (new Date().getTime() - this.currentCaptchaConfig.startSlidingTime.getTime()),
        type: "click"
      });
      this.clickCount.left[this.clickCount.num - 1] = event.offsetX - 10;
      this.clickCount.top[this.clickCount.num - 1] = event.offsetY - 10;

      if (this.clickCount.num === num) {
        // 校验
        this.currentCaptchaConfig.endSlidingTime = new Date();
        window.removeEventListener("mousemove", this.move);
        setTimeout(()=>{ // 这里不延时最后一个点不会显示
          this.currentCaptchaConfig.data = this.captcha.id;
          this.currentCaptchaConfig.bgImageWidth = this.$refs.bgImg.offsetWidth;
          this.currentCaptchaConfig.bgImageHeight = this.$refs.bgImg.offsetHeight;

          reqCheck(this.currentCaptchaConfig).then(res=>{
            this.currentCaptchaConfig.data = null;
            if(res.code != 501){
              this.close(res.msg);
            }else{
              this.initCaptcha();
              this.refreshCaptcha();
            }
          });
        }, 400)
      }
    },
    refreshCaptcha(){
      this.$emit("initCaptcha");
      console.log("WORD");
    },
    initCaptcha(){
      this.clickCount = {
        num:0,
        left: [],
        top: []
      };
      let color = localStorage.getItem("layout-setting")
      if(color){
        this.clickCount.color = JSON.parse(color).theme;
      }else{
        this.clickCount.color = "#409eff";
      }
    },
    move(event) {
      if (event instanceof TouchEvent) {
        event = event.touches[0];
      }
      this.currentCaptchaConfig.trackList.push({
        x: event.offsetX,
        y:event.offsetY,
        t: (new Date().getTime() - this.currentCaptchaConfig.startSlidingTime.getTime()),
        type: "move"
      });
    },
    close(msg){
      this.$emit("close", msg);
    },
  }
}
</script>
<style scoped>
.slider {
  background-color: #fff;
  width: 380px;
  height: 280px;
  z-index: 999;
  box-sizing: border-box;
  padding: 9px;
  border-radius: 6px;
  box-shadow: 0 0 11px 0 #999999;
}

.slider .content {
  width: 100%;
  height: 160px;
  position: relative;
}

.bg-img-div {
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translate(0px, 0px);
}

.bg-img-div canvas {
  width: 100%;
}

.slider .slider-move {
  height: 60px;
  width: 100%;
  margin: 0;
  position: relative;
  top:80px
}

.slider .bottom {
  height: 20px;
  width: 100%;
  margin: 115px 10px 10px 0;
}

.refresh-btn, .close-btn {
  background: url(./img/sprite.1.2.4.png) no-repeat;
}

.refresh-btn, .close-btn {
  display: inline-block;
  margin-left: 10px;
}

.slider {
  user-select: none;
}

.close-btn:hover, .refresh-btn:hover {
  cursor: pointer
}

.bottom .close-btn {
  width: 25px;
  height: 25px;
  background-position: 0 44.86874%;
  margin: 0 10px 10px 5px;
  float: left;
}

.bottom .refresh-btn {
  width: 25px;
  height: 25px;
  background-position: 0 81.38425%;
  margin: 0 10px 12px 2px;
  float: left;
}

.bg-click-div {
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.rotate-img-div img {
  height: 100%;
}

.tip-text{
  font-size: 20px;
  margin: -41px 0 0 80px;
}

.click-span {
  position: absolute;
  border-radius: 50px;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  color: #fff;
  border: 2px solid #fff;
}
</style>
